<template>
    <div class="monitor-page" :style="scaleStyle">
        <index></index>
    </div>
</template>

<script>
    import Index from "../components/mon/Index";
    export default {
        name: "MonitorPage",
        components: {Index},
        data() {
            return {
                scaleStyle: ""
            }
        },
        mounted() {
            // scale compute for the viewport size
            this.zoom()
            let _this = this
            window.onresize = () => {
                _this.zoom()
            }
        },
        methods: {
            zoom() {
                let width = 3520, height = 1980
                let x = window.innerWidth / width, y = window.innerHeight / height
                let scale = "scale(" + x + ", " + y + ")"
                let cssText = "overflow:hidden;"
                cssText += "width:" + width + "px;"
                cssText += "height:" + height + "px;"
                let browsers = ["", "-ms-", "-moz-", "-webkit-", "-o-"]
                browsers.forEach((key) => {
                    cssText += key + "transform:" + scale + ";"
                    cssText += key + "transform-origin: left top 0;"
                })
                this.scaleStyle = cssText
            }
        }
    }
</script>

<style lang="scss" scoped>
    .monitor-page {
        width: 3520px;
        height: 1980px;
        background-color: black;

        transform-origin: left top;
    }
</style>